<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<title>Flotr: Basic Bar Example</title>
		<link rel="stylesheet" href="style.css" type="text/css" />
		<script type="text/javascript" src="../lib/yepnope.js"></script>
	</head>
	<body>
		
		<!-- ad -->
		
		<div id="wrapper">
			<h1></h1>
			<div id="container" style="width:600px;height:300px;"></div>
			<h2>Example</h2>
			<p>Random bar graph.</p>
			<p><b>Note</b>: Opera 9.2x has problems with the fill area, this should be fixed in version 9.50.</p>
			<p>Finished? Go to the example <a href="index.html" title="Flotr Example Index Page">index page</a>, play with the <a href="../../playground/index.html" title="Flotr playground">playground</a> or read the <a href="http://www.solutoire.com/flotr/docs/" title="Flotr Documentation Pages">Flotr Documentation Pages</a>.</p>
			<h2>The Code</h2>
			<pre id="code-view"><code class="javascript"></code></pre>
			<div id="footer">Copyright &copy; 2008 Bas Wenneker, <a href="http://www.solutoire.com">solutoire.com</a></div>
		</div>
		
		<!-- ad -->
		
		<script type="text/javascript">
			function example(){

                var container = document.getElementById('container');

        function markerFomatter(obj) {
          return obj.y+'%';
        }
        
				/**
				 * Fill series d1 and d2 width random values.
				 */
				var point, 
            d1 = [],
            d2 = [],
            markers = {data:[], markers:{show: true, position: 'ct', labelFormatter: markerFomatter}, bars:{show: false}};
            
			  for(var i = 0; i < 4; i++ ){
          point = [i, Math.ceil(Math.random()*10)];
					d1.push(point);
          markers.data.push(point);
          
          point = [i+0.5, Math.ceil(Math.random()*10)];
					d2.push(point);
          markers.data.push(point);
				}
				
				/**
				 * Draw the graph in the first container.
				 */
				Flotr.draw(
					container,
					[d1, d2, markers],
					{
            bars: {show:true, barWidth:0.5}, 
            mouse: {track:true, relative:true},
					  yaxis: {min: 0, autoscaleMargin: 1},
            spreadsheet: {show: true}
					}
				);
			};			
		</script>
		
		<!-- analytics -->
		
	</body>
  <script type="text/javascript" src="includes.js"></script>
</html>
